<!-- Vue单文件组件的脚本部分，使用setup语法糖 -->
<script setup>
// 从Vue中导入ref函数，用于创建响应式数据
import { ref } from "vue";

// 创建一个布尔类型的响应式变量isActive，用于控制active类的应用状态
// 初始值为true，表示默认应用active类
const isActive = ref(true);

// 创建响应式变量activeClass，存储类名"active"
const activeClass = ref('active');

// 创建响应式变量borderClass，存储类名"border"
const borderClass = ref('border');
</script>

<!-- 模板部分，定义组件的HTML结构，展示v-bind:class的多种数组用法 -->
<template>
    <!--
        第一种用法：数组直接绑定多个响应式类名变量
        相当于固定应用activeClass和borderClass对应的类
        此时渲染结果为: <div class="active border"></div>
    -->
    <div v-bind:class="[activeClass, borderClass]"></div>

    <!--
        第二种用法：数组中使用三元表达式动态切换类名
        当isActive为true时，应用activeClass（即"active"类），否则不应用
        无论条件如何，始终应用borderClass（即"border"类）
        当前isActive为true，渲染结果为: <div class="active border"></div>
        若isActive改为false，渲染结果为: <div class="border"></div>
    -->
    <div v-bind:class="[isActive ? activeClass : '', borderClass]"></div>

    <!--
        第三种用法：数组中混合对象语法和类名变量
        {active: isActive} 表示：当isActive为true时应用"active"类
        borderClass 表示始终应用"border"类
        这种方式结合了对象语法的条件判断和数组语法的多类名绑定
        当前isActive为true，渲染结果为: <div class="active border"></div>
    -->
    <div v-bind:class="[{active: isActive}, borderClass]"></div>
</template>

<!-- 样式部分，scoped确保样式仅作用于当前组件 -->
<style scoped>
/*
    active类的样式：
    - 宽100px，高50px
    - 底部外边距2px（用于分隔多个div）
    - 背景色为#1cc620（一种绿色）
*/
.active {
    width: 100px;
    height: 50px;
    margin-bottom: 2px;
    background: #1cc620;
}

/*
    border类的样式：
    - 2px宽的实线边框
    - 边框颜色为#f40156（一种粉红色）
*/
.border {
    border: 2px solid #f40156;
}
</style>